<template>
	<view class="index-section">
		<tit tit="汇资讯" url="/pages/home/dietIndex" v-if="home"/>
		<view class="clickableInfo" v-if="home">
			<clickBtn :tabList="tabList" @cur="cur" ref="clickBtn"/>
		</view>
		<view class="main">
			<view class="item" v-for="(item,index) in list" :key="index"  @tap.stop="handleDetail(item.id)">
				<view class="left">
					<image :src="$imageOss(item.image)" mode="aspectFill" style="" class="image"></image>
				</view>
				<view class="right">
					<view class="top">
						{{item.title}}
					</view>
					<view class="bot">
						<text class="title">{{item.from}}</text>
						<text class="time">{{item.createtime}}</text>
					</view>
				</view>
			</view>
			<view style="width: 100%; text-align: center; font-size: 28rpx; margin-top: 10rpx;">{{isText}}</view>
		</view>
	</view>
</template>

<script>
	import tit from '@/pages/index/cpns/title.vue';
	import clickBtn from '@/pages/index/cpns/clickBtn.vue';
	import { newsCategory,newsList } from "@/request/homeApi.js"
	export default {
		components: {
			tit,
			clickBtn,
		},
		props:{
			home:{
				type:Boolean,
				default:true
			},
			// 'list': {
			// 	default: [],
			// 	type: Array
			// },
			url: {
				default: '',
				type: String
			}
		},
		data() {
			return {
				tabList: [],
				list:[],
				news_category_id:1,
				isText:''
			};
		},
		mounted() {
			this.getCategory()
			
		},
		methods:{
			cur(e){
				this.news_category_id = e
				this.getList()
			},
			getCategory(){
				let that = this
				newsCategory().then(res => {
					if(res.code == 200){
						that.tabList = res.data
						that.news_category_id = res.data.length>0?res.data[0].id:''
						that.$refs.clickBtn.changeIndex()
						that.getList()
					}
					
				})
			},
			getList(){
				let that = this
				newsList({
					news_category_id: that.news_category_id,
					page:1,
					limit:2,
					title:'',
					type:'',
					recommend:2
				}).then(res => {
					that.list = res.data.list
					res.data.count == 0 ? that.isText = '暂无资讯' : that.isText = ''
				})
			},
			handleDetail(id) {
				uni.navigateTo({
					url: `/pages/home/festivalDetail?id=${id}&type=1`,
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.index-section {
		padding: 20rpx;
		// margin-top: 20rpx;
		background-color: #fff;
		.clickableInfo{
			margin: 20rpx 0;
		}
		.main{
			display: flex;
			flex-direction: column;
			.item{
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;
				.left{
					width:160rpx;
					height: 122rpx;
					margin-right:20rpx;
					.image{
						border-radius: 8rpx;
						width: 100%;
						height: 100%;
					}
				}
				.right{
					flex:1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					font-size: 30rpx;
					.top{
						
					}
					.bot{
						display: flex;
						justify-content: space-between;
						align-items: center;
						.title{
							color: #466EC5;
							font-family: PingFang SC;
							font-size: 24rpx;
							font-style: normal;
							font-weight: 400;
							line-height: normal;
						}
						.time{
							color: #B6B6B6;
							font-family: PingFang SC;
							font-size: 24rpx;
							font-style: normal;
							font-weight: 400;
							margin-right: 24rpx;
							line-height: normal;
						}
					}
				}
			}
		}

	}
</style>